<template>
  <div class="common-layout">
    <el-breadcrumb separator="/" class="main1">
      <el-breadcrumb-item @click="goBack" style="cursor: pointer">返回</el-breadcrumb-item>
      <el-breadcrumb-item v-if="type === '1'">新闻列表</el-breadcrumb-item>
      <el-breadcrumb-item v-if="type === '2'">公告列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-container class="main" direction="vertical">
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item prop="title">
          <el-input
            v-model="queryParams.title"
            placeholder="请输入新闻标题"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        </el-form-item>
      </el-form>

      <ul>
        <li v-for="item in list" :key="item.id" @click="getNewInfo(item.id, type)">
          <div class="title">{{ item.title }}</div>
          <div class="date">
            {{ format(new Date(item.createTime), 'yyyy-MM-dd') }}
          </div>
        </li>
      </ul>
      <!-- 分页 -->
      <Pagination
        class="pagination"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { PolicyNewApi } from '@/api/dbit/policynew'
import { NoticeInfoApi } from '@/api/dbit/noticeinfo'
import { format } from 'date-fns'

const router = useRouter()
const route = useRoute()

const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const type = ref(route.query.type)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  title: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    if (type.value === '1') {
      const data = await PolicyNewApi.getPolicyNewPage(queryParams)
      list.value = data.list
      total.value = data.total
    }
    if (type.value === '2') {
      const data = await NoticeInfoApi.getNoticeInfoPage(queryParams)
      list.value = data.list
      total.value = data.total
    }
  } finally {
    loading.value = false
  }
}
/*获取政策新闻的详细信息*/
const getNewInfo = (id: number, type:string) => {
  // 跳转详情页
  router.push({ path: '/stunew/info', query: { id: id, type: type } })
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
function goBack() {
  router.back()
}

onMounted(() => {
  getList()
})
</script>
<style scoped>
* {
  padding: 0px;
  margin: 0px;
}
ul {
  list-style: none;
}
.main1 {
  width: 70%;
  margin: 0 auto;
  margin-bottom: 20px;
}
.main {
  width: 70%;
  background-color: #fff;
  margin: 0 auto;
  padding: 20px;
}
.main ul {
  min-height: 600px;
  width: 100%;
  margin-top: 10px;
}
.main ul li {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px solid #eceef5;
  cursor: pointer;
  height: 55px;
  line-height: 55px;
}
.title {
  font-size: 14px;
  max-width: 700px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.date {
  color: #86909c;
  font-size: 14px;
}
.pagination {
  margin: 0 auto;
}
</style>
